<script setup>
import { ElMessage } from "element-plus";
import { onActivated, ref } from "vue";
import { useRoute } from "vue-router";
import { execUpperControl } from "@/api/inspection/other-setting";
import { robotInspectionLog } from "@/api/inspection/environment-monitor";

const route = useRoute();

const formData = ref({
  alarm: true,
  autoLamp: true,
  code: route.query.id,
  dayThreshold: 0,
  light: true,
  RGB: "#ffffff",
  volume: 0,
});

const onSubmit = async () => {
  const { message } = await execUpperControl(formData.value);
  ElMessage({ type: "success", message });
};

onActivated(async () => {
  const { data } = await robotInspectionLog(route.query.id);
  formData.value = {
    code: route.query.id,
    alarm: data.alarmSwitch,
    volume: data.alarmValue,
    light: data.lightSwitch,
    autoLamp: data.autoLamp,
    dayThreshold: data.dayThreshold,
    rgb: data.lightRBG,
  };
});
</script>

<template>
  <div class="w-full h-full rounded bg-[#162331] p-8">
    <div class="h-16 w-full flex items-center justify-between">
      <span class="text-lg font-bold">声光报警器</span>
      <el-switch
        v-model="formData.alarm"
        size="large"
        :width="80"
        @change="onSubmit()"
      />
    </div>
    <div class="h-16 w-full flex items-center justify-between">
      <span class="text-lg font-bold basis-1/2">声光报警器音量</span>
      <el-slider
        v-model="formData.volume"
        :min="0"
        :max="30"
        :step="1"
        size="large"
        @change="onSubmit()"
      />
    </div>
    <div class="h-16 w-full flex items-center justify-between">
      <span class="text-lg font-bold">自动大灯开关</span>
      <el-switch
        v-model="formData.autoLamp"
        size="large"
        :width="80"
        @change="onSubmit()"
      />
    </div>
    <div class="h-16 w-full flex items-center justify-between">
      <span class="text-lg font-bold basis-1/2">自动大灯开启阈值</span>
      <el-slider
        v-model="formData.dayThreshold"
        :min="0"
        :max="100"
        :step="10"
        size="large"
        :disabled="!formData.autoLamp"
        @change="onSubmit()"
      />
    </div>
    <div class="h-16 w-full flex items-center justify-between">
      <span class="text-lg font-bold">大灯控制</span>
      <el-switch
        v-model="formData.light"
        size="large"
        :width="80"
        :disabled="formData.autoLamp"
        @change="onSubmit()"
      />
    </div>
    <div class="h-16 w-full flex items-center justify-between">
      <span class="text-lg font-bold">灯带颜色</span>
      <el-color-picker
        v-model="formData.RGB"
        size="large"
        @change="onSubmit()"
      />
    </div>
  </div>
</template>

<style scoped>
:deep(.el-form-item__content) {
  justify-content: flex-end;
}
</style>
